<template>
  <div class="publicize-course-manage">
    <div class="header">
      <div class="header-l">
        状态：
        <div @click="changeTag(1)" :class="['tag', tagActive === 1 ? 'active' : '']">已上架</div>
        <div @click="changeTag(0)" :class="['tag', tagActive === 0 ? 'active' : '']">未上架</div>
      </div>
      <el-button @click="toAdd()" type="primary" style="margin-left: auto;margin-right: 16px;height: 38px;">新增</el-button>
      <el-input @keydown.enter="search" v-model="searchVal" size="large" placeholder="请输入名称" style="width: 360px;">
        <template #suffix>
          <el-icon style="cursor: pointer;" @click="search">
            <Search />
          </el-icon>
        </template>
      </el-input>
    </div>
    <div class="table">
      <el-table v-loading="listLoading" :data="tableData" height="100%">
        <el-table-column prop="title" label="宣讲课程名称" show-overflow-tooltip>
          <template #default="{ row }">
            <div class="link-button" @click="toDetails(row)">{{ row.title }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="课程分类" width="160" show-overflow-tooltip>
          <template #default="{ row }">
            {{ courseTypeList.dict[row.type] }}
          </template>
        </el-table-column>
        <el-table-column prop="description" label="课程简介" show-overflow-tooltip />
        <el-table-column prop="createTime" label="提交日期" width="120" />
        <el-table-column prop="date" label="状态" width="90">
          <template #default="{ row }">
            <div v-if="row.status == 1" class="status-tag listed">已上架</div>
            <div v-else class="status-tag not-listed">未上架</div>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="opera" label="操作" width="150">
          <template #default="{ row }">
            <span v-if="row.status == 0" @click="courseManage(row, 1)" class="link-button">上架</span>
            <span v-if="row.status == 1" @click="courseManage(row, 0)" class="link-button">下架</span>
            <span @click="toEdit(row)" class="link-button">编辑</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination :total="pager.total" v-model:current-page="pager.pageIndex" :page-size="pager.pageSize"
        @current-change="getList" prev-text="上一页" next-text="下一页" layout="prev, pager, next" background />
    </div>
  </div>
</template>
<script>
export default { name: 'PublicizeCourseManage' }
</script>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import usePager from '@/hooks/usePager.js'
import { format } from '@/plugins/moment.js'
import { http } from '@/utils/http/index.js'
import { ElMessage } from 'element-plus';
import { useAuthStore } from '@/stores/modules/auth';
const authStore = useAuthStore()

const router = useRouter()

const searchVal = ref('')
const tableData = ref([])

// 分页钩子
const { pager, listLoading, proxyFun } = usePager(15, '/Preach/GetPreachCourseList')

const params = ref({
  dfi: {
    logic: 0,
    filters: [
      { field: 'ExpertId', operator: 8, value: authStore.userInfo.expertId },
    ]
  }
})
const getList = () => {
  proxyFun(params.value).then(res => {
    res.result.dataLst.forEach(item => item.createTime = format(item.createTime))
    tableData.value = res.result.dataLst
  })
}
// 初始化列表
getList()

// 检索
const search = () => {
  pager.pageIndex = 1
  params.value = getParams()
  getList()
}

const getParams = () => {
  const temp = {
    uid: authStore.userInfo.expertId,
    dfi: {
      logic: 0,
      filters: [
        { field: 'ExpertId', operator: 8, value: authStore.userInfo.expertId },
        { field: 'title', operator: 0, value: searchVal.value },
      ]
    }
  }
  if (tagActive.value !== '') temp.dfi.filters.push({ field: 'status', operator: 8, value: tagActive.value })
  return temp
}

const tagActive = ref('')
const changeTag = (type) => {
  tagActive.value === type ? tagActive.value = '' : (tagActive.value = type)

  pager.pageIndex = 1
  params.value = getParams()
  getList()
}

/**上下架 */
const courseManage = (row, status) => {
  http.$POST('/Preach/UpdatePreachExpertCourseStatus', { status, CourseId: row.id }).then(res => {
    if (res.isError) return ElMessage.warning(res.message)
    ElMessage.success(res.message)
    getList()
  })
}
const toAdd = () => {
  router.push('/personal-center/publicize-course-manage/course-edit?type=add')
}
const toEdit = (item) => {
  router.push('/personal-center/publicize-course-manage/course-edit?type=edit&id=' + item.id)
}
const toDetails = (item) => {
  router.push('/personal-center/publicize-course-manage/course-details?id=' + item.id)
}

const courseTypeList = ref({ options: [], dict: {} })
const getType = () => {
  http.$POST('/PreachM/GetPreachCourseTypeInfoList', { pageIndex: 1, pageSize: 99 }).then(res => {
    if (res.isError) return
    courseTypeList.value = {
      options: res.result.dataLst,
      dict: res.result.dataLst.reduce((pre, next) => ({ ...pre, [`${next.id}`]: next.courseTypeName }), {})
    }
  })
}
getType()

</script>
<style lang='scss' scoped>
.publicize-course-manage {
  width: 100%;
  height: 100%;
  font-family: PingFang SC-Medium, PingFang SC;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 32px 36px;

  .header {
    display: flex;
    align-items: center;
    padding-bottom: 27px;
    justify-content: space-between;

    .header-l {
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 15px;
      color: #525252;
      gap: 10px;

      .tag {
        user-select: none;
        color: #666666;
        padding: 8px 16px;
        background-color: #F4F4F4;
        cursor: pointer;
        transition: all .2s;

        &.active {
          color: #4A8FE0;
          background-color: #EAF3F9;
        }
      }
    }
  }

  .table {
    width: 100%;
    flex: 1;
    height: 0;

    :deep(.el-table) {
      .el-table__header {
        thead {
          th {
            background-color: #F6F6F6;
            color: #666666;
            font-weight: 600;
            font-size: 14px;
            height: 55px;
          }
        }
      }
    }
  }

  .link-button {
    color: #508CDE;
    cursor: pointer;

    &+span {
      margin-left: 10px;
    }
  }

  .link-spilt {
    width: 1px;
    background-color: #508CDE;
    display: inline-block;
    height: 14px;
    margin: 0 10px;
  }

  .status-tag {
    width: 64px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    &.listed {
      color: #2CC86D;
      background-color: #EAF9EF;
    }

    &.not-listed {
      color: #3D88DE;
      background-color: #EAF3F9;
    }
  }

  .pagination {
    padding-top: 30px;

    :deep(.el-pagination) {
      justify-content: center;
    }
  }

}
</style>